<template>
  <div style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);">

    <el-row>
      <el-col :span="6">

        <el-menu class="el-menu--vertical-demo">
          <span @click="this.$router.push('/menu/index')" class="headerSpan">进销存管理系统</span>
          <el-sub-menu index="1" v-if="limitList.includes(1) || limitList.includes(2)">
            <template #title>
              <el-icon>
                <Document/>
              </el-icon>
              <span class="bigSpan">资料管理</span></template>
            <el-menu-item class="subItem" index="1-1" @click="showVendor" v-if="limitList.includes(1)">供应商管理
            </el-menu-item>
            <el-menu-item class="subItem" index="1-2" @click="showClient" v-if="limitList.includes(2)">客户管理
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2" v-if="limitList.includes(3) || limitList.includes(4)">
            <template #title>
              <el-icon>
                <DocumentAdd/>
              </el-icon>
              <span class="bigSpan">采购管理</span></template>
            <el-menu-item class="subItem" index="2-1" @click="showBuyCar" v-if="limitList.includes(3)">采购入库
            </el-menu-item>
            <el-menu-item class="subItem" index="2-2" @click="showBuyInfo" v-if="limitList.includes(4)">采购信息查询
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3" v-if="limitList.includes(5) || limitList.includes(6)">
            <template #title>
              <el-icon>
                <SemiSelect/>
              </el-icon>
              <span class="bigSpan">销售管理</span></template>
            <el-menu-item class="subItem" index="3-1" @click="showSaleCar" v-if="limitList.includes(5)">销售出库
            </el-menu-item>
            <el-menu-item class="subItem" index="3-2" @click="showSaleInfo" v-if="limitList.includes(6)">销售信息查询
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4" v-if="limitList.includes(7)">
            <template #title>
              <el-icon>
                <Collection/>
              </el-icon>
              <span class="bigSpan">库存管理</span></template>
            <el-menu-item class="subItem" index="4-1" @click="showProduct">库存一览</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5" v-if="limitList.includes(8) || limitList.includes(9)">
            <template #title>
              <el-icon>
                <Histogram/>
              </el-icon>
              <span class="bigSpan">统计信息</span></template>
            <el-menu-item class="subItem" index="5-1" @click="showSaleStats" v-if="limitList.includes(8)">销售统计
            </el-menu-item>
            <el-menu-item class="subItem" index="5-2" @click="showMonth" v-if="limitList.includes(9)">月销售统计
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="6" v-if="limitList.includes(10) || limitList.includes(11)">
            <template #title>
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span class="bigSpan">权限管理</span></template>
            <el-menu-item class="subItem" index="6-1" @click="showUser" v-if="limitList.includes(10)">用户管理
            </el-menu-item>
            <el-menu-item class="subItem" index="6-2" @click="showRole" v-if="limitList.includes(11)">角色管理
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="7">
            <template #title>
              <el-icon>
                <Avatar/>
              </el-icon>
              <span class="bigSpan">个人信息管理</span></template>
            <el-menu-item class="subItem" index="7-1" @click="showPwd">修改密码</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="8" v-if="limitList.includes(12)">
            <template #title>
              <el-icon>
                <InfoFilled/>
              </el-icon>
              <span class="bigSpan">日志信息</span></template>
            <el-menu-item class="subItem" index="8-1" @click="showLog">日志一览</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="9">
            <template #title>
              <el-icon>
                <Avatar/>
              </el-icon>
              <span class="bigSpan" @click="clean">退出登陆</span></template>
          </el-sub-menu>


        </el-menu>

      </el-col>
      <el-col :span="18">

        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

(function () {
  var a_idx = 0;
  window.onclick = function (event) {
    var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");

    var heart = document.createElement("b"); //创建b元素
    heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

    document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
    a_idx = (a_idx + 1) % a.length;
    heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

    var f = 16, // 字体大小
        x = event.clientX - f / 2, // 横坐标
        y = event.clientY - f, // 纵坐标
        c = randomColor(), // 随机颜色
        s = 1.2; // 放大缩小

    var timer = setInterval(function () { //添加定时器
      if (a <= 0) {
        document.body.removeChild(heart);
        clearInterval(timer);
      } else {
        heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
            c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
            s + ");";

        y--;
        a -= 0.016;
        s += 0.002;
      }
    }, 3)

  }
  // 随机颜色
  function randomColor() {

    return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
        .random() * 255)) + ")";

  }
}());
export default {
  created() {
    let info = JSON.parse(sessionStorage.getItem("loginUser"));
    console.log(info)
    this.limitList = info.permissionList.map(n => n.id);

  },
  data() {
    return {
      limitList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      name: "index",
    }
  },
  methods: {
    showVendor() {
      this.$router.push("/menu/vendor")
    },
    showClient() {
      this.$router.push("/menu/client")
    },
    showBuyCar() {
      this.$router.push("/menu/buyCar")
    },
    showBuyInfo() {
      this.$router.push("/menu/buyInfo")
    },
    showSaleCar() {
      this.$router.push("/menu/saleCar")
    },
    showSaleInfo() {
      this.$router.push("/menu/saleInfo")
    },
    showProduct() {
      this.$router.push("/menu/product")
    },
    showSaleStats() {
      this.$router.push("/menu/saleStats")
    },
    showMonth() {
      this.$router.push("/menu/month")
    },
    showUser() {
      this.$router.push("/menu/user")
    },
    showRole() {
      this.$router.push("/menu/role")
    },
    showPwd() {
      this.$router.push("/menu/updatePwd")
    },
    showLog() {
      this.$router.push("/menu/log")
    },
    clean() {
      axios.get("/project/user/clean").then(resp => {
        if (resp.data == "ok") {
          this.$router.push("/")
        }
      })
    },

  }
};





</script>

<style scoped>
.el-menu--vertical-demo {
  text-color: "#fff";

}

.el-menu--vertical-demo {
  overflow: auto;
  display: block;
  height: 640px;
  width: 300px;
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.headerSpan {
  text-align: center;
  display: block;
  width: 280px;
  height: 50px;
  font-size: 30px;
  padding-top: 20px;
}

.subItem {


  font-size: 16px;
}

.bigSpan {
  font-size: 20px;
  text-align: center;
}
</style>